<template>
  <el-drawer
    title="重置密码"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDrawer"
    custom-class="tag-drawer reset-pwd-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="150px" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-form-item label="登录密码" prop="loginPwd">
              <el-input placeholder="请输入登录密码" type="password" v-model="editForm.loginPwd"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="新的登录密码" prop="newLoginPwd">
              <el-input placeholder="请输入新的登录密码" type="password" v-model="editForm.newLoginPwd"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="确认新的登录密码" prop="confirmNewLoginPwd">
              <el-input
                placeholder="请输入新的登录密码"
                type="password"
                v-model="editForm.confirmNewLoginPwd"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-form-item label="密码强度">
            <el-progress
              :percentage="pasStrength.progress"
              :show-text="false"
              :stroke-width="12"
              :class="'psd-strength' + pasStrength.level"
            ></el-progress>
            <span class="pas-strength">
              安全级别：<span :class="'psd-strength' + pasStrength.level">{{ pasStrength.label }}</span>
            </span>
          </el-form-item>
        </el-form>
        <el-row>
          <el-col :span="24" align="right">
            <div class="tips">建议使用数字、字母和字符的组合密码，提高密码安全等级</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button size="medium" @click="clearDrawer">取消</el-button>
      <el-button type="primary" size="medium" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import utils from '@/plugins/utils'
export default {
  data() {
    return {
      drawerVisible: false,
      editForm: {
        loginPwd: '',
        newLoginPwd: '',
        confirmNewLoginPwd: ''
      },
      editFormRules: {
        loginPwd: [{ required: true, message: '登录密码不能为空', trigger: 'blur' }],
        newLoginPwd: [{ required: true, message: '新的登录密码不能为空', trigger: 'blur' }],
        confirmNewLoginPwd: [{ required: true, message: '新的确认登录密码不能为空', trigger: 'blur' }]
      },
      pasStrength: {
        level: 0,
        progress: 0,
        label: '很弱'
      }
    }
  },
  watch: {
    'editForm.newLoginPwd'(val) {
      let progress = utils.checkStrong(val)
      switch (progress) {
        case -1:
          this.pasStrength.level = 0
          this.pasStrength.progress = 0
          this.pasStrength.label = '很弱'
          break
        case 0:
          this.pasStrength.level = 1
          this.pasStrength.progress = 10
          this.pasStrength.label = '很弱'
          break
        case 1:
          this.pasStrength.level = 1
          this.pasStrength.progress = 25
          this.pasStrength.label = '弱'
          break
        case 2:
          this.pasStrength.level = 2
          this.pasStrength.progress = 50
          this.pasStrength.label = '中'
          break
        case 3:
          this.pasStrength.level = 3
          this.pasStrength.progress = 75
          this.pasStrength.label = '强'
          break
        case 4:
          this.pasStrength.level = 4
          this.pasStrength.progress = 100
          this.pasStrength.label = '很强'
          break
      }
    }
  },
  methods: {
    showDrawer() {
      this.drawerVisible = true
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          if (this.pasStrength.level < 2) {
            this.$message.error('密码强度不足，请重新输入')
            return
          }
          if (this.editForm.confirmNewLoginPwd !== this.editForm.newLoginPwd) {
            this.$message.error('两次输入的新密码不一致，请重新输入')
            return
          }
          this.$ajax({
            url: this.$ajax.setUrl('auth/authUser/pwd'),
            method: 'put',
            data: this.$ajax.setData({
              loginPwd: utils.crypto(this.editForm.loginPwd),
              newLoginPwd: utils.crypto(this.editForm.newLoginPwd),
              pwdStrong: this.pasStrength.level
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.$emit('refresh')
              this.clearDrawer()
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    clearDrawer() {
      this.editForm.loginPwd = ''
      this.editForm.newLoginPwd = ''
      this.editForm.confirmNewLoginPwd = ''
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss">
.reset-pwd-drawer {
  .el-progress {
    display: inline-block;
    width: 70%;
  }
  .pas-strength {
    display: inline-block;
    width: 30%;
    text-align: right;
  }
}
</style>
